PopupBottom

<template>
    <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '60%' }">
        <div class="popup-container">
            <div class="box-top">
                <van-image class="img-success" fit="cover" position="left" :src="successImage" />
                <div class="title-success">恭喜您！完成测评</div>
                <div class="tip-success">未及时查看结果可前往-测评记录中查看</div>
            </div>
            <div class="box-bottom">
                <div class="btn-click btn-restart" @click="onRestart">重新答题</div>
                <div class="btn-click btn-submit" @click="onSubmit">查看结果</div>
            </div>
        </div>
    </van-popup>
</template>

<script lang="ts" setup name="PopupFinish">
import { ref } from 'vue';
import successImage from '@/assets/image/icon_success.png'
const emits = defineEmits(['onRestart', 'onSubmit'])
const show = ref<boolean>(false)
const switchShow = (isShow: boolean) => {
    show.value = isShow;
}
const onRestart = () => emits('onRestart')
const onSubmit = () => emits('onSubmit')

defineExpose({
    switchShow
})
</script>

<style lang="scss" scoped>
.popup-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: $color_white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    .box-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        .img-success {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .title-success {
            font-size: 20px;
            font-weight: bold;
            line-height: 24px;
            letter-spacing: 0em;
            color: $color_text_dark;
        }

        .tip-success {
            margin-top: 10px;
            font-size: 12px;
            font-weight: normal;
            line-height: 24px;
            letter-spacing: 0em;
            color: $color_text_grey;
        }
    }

    .box-bottom {
        width: 100%;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .btn-restart {
            width: 128px;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            text-align: center;
            border: 1px solid $color_primary;
            color: $color_primary;
            border-radius: 290px;
        }

        .btn-submit {
            width: 205px;
            height: 50px;
            font-size: 14px;
            line-height: 50px;
            text-align: center;
            background-color: $color_primary;
            color: $color_white;
            border-radius: 290px;
        }
    }
}
</style>